<!-- 更改舍号页面 -->
<template>
	<view>
	    <view class="login-content">
			<view class="houseId row-center" >
				{{this.changeNfcId ? '当前读取的卡号:' +this.changeNfcId: '请靠近NFC卡片读取卡号'}}
			</view>
			
			<view class="" style="display: flex;flex-direction: column;width: 90%;margin: auto;">
				
				<view class="uni-nav-bar" style="margin:40rpx 0">
					请输入需要更换的鸽舍号(位置)
				</view>
				
				<view class="" style="display:flex;justify-content:center;align-items: center;">
					
					<input class="houseinput" type="number" maxlength="2" v-model="siteId" @input="clearInput" />
					<span>仓</span>
					<input class="houseinput" type="number" maxlength="3" v-model="rowId" @input="clearInput" />
					<span>排</span>
					<input class="houseinput" type="number" maxlength="3" v-model="houseId" @input="clearInput" />
					<span>列</span>
					
				</view>
				
			</view>
			
			<button class="add-btn" @click="houseChange">更改</button>
			
	    	<!-- 顶部提示 -->
	    	<u-toast ref="uToast" />
	    </view>
	</view>	
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {reqHouseChange} from '@/api/index.js'
	import colorGradient from '../../components/uview-ui/libs/function/colorGradient'
	
	export default {
		data() {
			return {
				siteId:'', //仓号 (对应site_id)
				rowId:'', //排号 (对应row_id)
				houseId:'', //舍号 (对应house_id)
				
				successMessage: '',
				showClearIcon: false //是否显示清除按钮
			}
		},
		computed: {
			...mapGetters(['show_nfcId', 'changeNfcId','nfcId'])
		},
		
		methods: {
			// 判断是否显示清除按钮
			clearInput: function(event) {
				this.newWarehouseNumber = event.detail.value;
				this.showClearIcon = event.detail.value.length > 0;
			},
			
			//houseChange 更改舍号
			houseChange(){
				let that = this;
				
				//输入验证
				if (!that.siteId) {
					uni.showToast({ title: '请输入仓号', icon: 'none' });
					return false;
				}else if(!that.rowId){
					uni.showToast({ title: '请输入排号', icon: 'none' });
					return false;
				}else if(!that.houseId){
					uni.showToast({ title: '请输入舍号', icon: 'none' });
					return false;
				}else if(!that.changeNfcId){
					uni.showToast({ title: '请先读取NFC卡号', icon: 'none' });
					return false;
				}
				
				//准备请求参数
				const params = {
					site_id: parseInt(this.siteId),
					row_id: parseInt(this.rowId),
					house_id: parseInt(this.houseId),
					nfc_id: this.changeNfcId
				};
				console.log(params);
				
				this.$loading();
				
				//发送请求
				reqHouseChange(params).then((res)=>{
					this.$hide();
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						duration:'1200',
						position: 'top'
					});
					//成功后清空舍号输入框
					this.houseId = '';
				}).catch((res)=>{
					this.$hide();
					this.$refs.uToast.show({
						title: res.response?.data?.error || '修改失败',
						type: 'error',
						duration:'1200',
						position: 'top'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.login-content uni-input[data-v-2117ab26]{
		padding: 0 !important;
		height: 64rpx;
	}
	
	.houseId {
		width: 100%;
		margin: 10rpx auto;
		padding: 18.12rpx 18.12rpx;
		font-size: 39.86rpx;
		border-radius: 14.49rpx;
		color: #fff;
		background-color: #7d9ad2;
	}
	
	.login-content {
		width: 100%;
		height: 80vh;
		text-align: center;
		color: #333333;
	}

	.add-title {
		padding-top: 15rpx;
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 62rpx;
	}

	.login-content input {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 50rpx;
		text-align: center;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.iphone, .password, .test {
		position: relative;
		margin-bottom: 60rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 36rpx;
		right: 60rpx;
	}

	.test-btn, .password-btn {
		color: #ff8b33;
		font-size: 30rpx;
		text-align: right;
	}

	.get-test {
		color: #ff8b33;
		font-size: 30rpx;
		width: 244rpx;
		height: 100rpx;
		border: 1px solid #FF8B33;
		border-radius: 50rpx;
		line-height: 100rpx;
	}

	.test {
		display: flex;
		justify-content: space-between;
	}

	.add-btn {
		margin-top: 7vh;
		position: relative;
		left: 50%;
		transform: translate(-50%);
		width: 50vw;
		height: 90rpx;
		background: #FF8B33;
		border-radius: 72rpx;
		color: #fff;
		font-size: 40rpx;
		text-align: center;
		line-height: 90rpx;
	}
</style>